<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <el-card style="text-align: center">
          <div class="avatar-container"  @mouseover="isHovered=true" @mouseout="isHovered=false">
            <img
                :src="userInfo.avatar"
                alt="头像"
                class="avatar"
            >
            <div v-if="isOwner" class="avatar-overlay" :class="{ 'show-overlay': isHovered }">
              <el-upload
                  :data="{sceneCode:'avatar'}"
                  :action="$fileUpload"
                  :headers="$getHeaders"
                  :on-success="handleSuccess"
              >
                <i class="fas fa-camera"></i>
                <span>更换头像</span>
              </el-upload>
            </div>
          </div>
          <div>
            <h5>
              <b>{{userStore.nickname}}</b>
            </h5>
            <div>
              <el-text size="small">{{userInfo.major}} | {{userInfo.grade}}</el-text>
            </div>
            <el-space>
              <div>
                <span>128</span>
                <br>
                <el-text size="small">获赞</el-text>
              </div>
              <div>
                <span>128</span>
                <br>
                <el-text size="small">关注</el-text>
              </div>
              <div>
                <span>128</span>
                <br>
                <el-text size="small">粉丝</el-text>
              </div>
            </el-space>
          </div>
          <el-button type="primary"  style="width: 100%;margin-top: 20px">编辑个人资料</el-button>
        </el-card>
        <div class="model">
          <el-menu
              :default-active="route.path"
              class="el-menu-vertical-demo"
              router
          >
            <div style="text-align: center">菜单</div>
            <el-menu-item :index="`/layout/user/${userId}/info`">基本资料</el-menu-item>
            <el-menu-item :index="`/layout/user/${userId}/forum`">论坛</el-menu-item>
            <el-menu-item :index="`/layout/user/${userId}/event`">校园活动</el-menu-item>
            <el-menu-item :index="`/layout/user/${userId}/lost-found`">失物招领</el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
<!--        <el-header>Header</el-header>-->
        <el-main style="padding-top: 0">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from "vue"
import {useRoute, useRouter} from "vue-router"
import {useUserStore} from "@/stores/user"
import {
  HomeFilled, House, ChatDotRound, UserFilled,
  Share, Search, Calendar, ShoppingCart, CaretBottom,
  Setting, Message, Bell
} from '@element-plus/icons-vue'
import {reqGetLoginUserInfo, reqGetUserById, reqModifyLoginUser} from "@/api/front/user";

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
let userInfo=ref({})
const isHovered = ref(false);
let userId=route.params.userId

//是否是登录人自己
let isOwner=computed(()=>{
  return userStore.userId==userId
})
let getUserInfo=async ()=>{
  let res=await reqGetUserById(userId)
  userInfo.value=res.data
}
let handleSuccess=(res)=>{
  reqModifyLoginUser({avatar:res.data.visitPath, userId}).then(res=>{
    userStore.modifyUserInfo()
  })
}

// 页面加载时初始化
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
/* 整体容器 */
.avatar-container {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin:0 auto;
}
.common-layout{
  width: 1400px;
  margin:20px auto;
}
.model{
  margin-top: 20px;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.show-overlay {
  opacity: 1;
}

.avatar-overlay i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

</style>
